Ext.onReady(function(){

    Ext.QuickTips.init();

    var header = new Ext.Panel({
        border: false,
        layout: 'anchor',
        region: 'north',
        cls: 'docs-header',
        height: 30,
        items: [{
            xtype: 'box',
            el: 'header',
            border: false,
            anchor: 'none 0'
        }]
    });//end of header
    var viewport = new Ext.Viewport({
        layout: 'border',
        frame: true,
        items: [header, {
            region: 'south',
            border: true,
            html: '<div style="background:#1E4176;text-align: center;font-size: 80%;color:white;">OSU Constructin Impact Editor - by Mel Meng May 2009, <a id="dlz-link" href="http://www.dlz.com">DLZ</a>. ymeng@dlz.com<div>'
        
        }, {
            region: 'center',
            
            layout: 'fit',
            border: false,
            
            title: 'Impact List',
            iconCls: 'icon-impact',
            id: 'img-detail-panel',
            
            
            items: {
                xtype: 'app_gridpanel',
                id: 'app-grid-panel'
            }
        }, {
            region: 'east',
            layout: 'fit',
            split: true,
            autoScroll: true,
            collapsible: false,
            width: 600,
            layout: 'fit',
			collapsed: false,
			xtype: 'app_editform',
            id: 'app-edit-form'
        
        }]
    });//end of viewport
    //global variables
	
	/*
	 * implement the logic
	 */
    
    app_edit_form = Ext.getCmp('app-edit-form');
	
    
    app_grid_panel = Ext.getCmp('app-grid-panel');
	
    
	
	app_gridpanel_new_btn = Ext.getCmp('app-grid-panel-new-btn');
	
	app_gridpanel_new_btn.on('click', function(btn, e){
		
		app_edit_form.new_entry();
	});
	
	
	/*
	 * grid panel delete button
	 */
    app_gridpanel_delete_btn = Ext.getCmp('app-grid-panel-delete_btn');
	
	app_gridpanel_delete_btn.on('click', function(btn, e){
		
		
    
        var sel = app_grid_panel.getSelectionModel().getSelected();
        if (sel) {
            Ext.Ajax.request({
                url: '/test',
                params: {
                    projectid: sel.get('projectid'),
                    request_type: 'delete'
                },
                method: 'post',
                success: function(result, request){
                    var jsondata = Ext.util.JSON.decode(result.responseText);
                    if (jsondata.success) {
                        app_pagingToolbar.doRefresh()
                        
                    }
                    else {
                        Ext.Msg.alert('Failed to delete the record')
                    }
                }
            })
        }
        else {
            Ext.Msg.alert('No record is selected')
            
        }
        
    
	});
    
	/*
	 * grid panel select row
	 */
    app_grid_panel.getSelectionModel().on('rowselect', function(sm, rowIdx, r){
		
			app_edit_form.loadRecord(r);
			app_edit_form.setTitle(r.data.project);	
		
        
        
    });
	
	/*
	 * grid panel when nothing is selected
	 */
	app_grid_panel.getSelectionModel().on('selectionchange', function(sm){
        if (sm.getSelected()){
			return
		}
		//nothing is selected
        app_edit_form.new_entry();
		app_edit_form.setTitle('No Record is selected');
		
    });
    
   app_pagingToolbar = Ext.getCmp('app-paging-toolbar');
  
  
    

    app_edit_form.getForm().on('actioncomplete', function(fm, action){
		app_pagingToolbar.doRefresh()
    });
	
	
   store.load({params: {limit:App.config.PAGE_SIZE, start:0}});
    
});
